<template>
	<view>
		<u-empty v-if="blackList.length === 0" mode="data" icon=""></u-empty>

		<uni-swipe-action>
			<uni-swipe-action-item v-for="(item, index) in blackList" :right-options="item.options" :key="item.userId" @click="swipeClick($event, index, item)">
				<view class="swipe-action u-border-top u-border-bottom">
					<view class="swipe-action__content">
						<view class="mr20"><u-avatar class="" :src="item.userAvatar"></u-avatar></view>
						<view class="">{{ item.userNick }}</view>
					</view>
				</view>
			</uni-swipe-action-item>
		</uni-swipe-action>
	</view>
</template>

<script>
export default {
	data() {
		return {
			blackList: []
		};
	},
	onShow() {
		this.getBlackList();
	},
	methods: {
		async getBlackList() {
			let re = await this.$API.friendApi.blackFriendList();
			// let re = await this.$API.friendApi.blackFriendNo(1);
			this.blackList = re;
			this.blackList = this.blackList.map(i => {
				i.options = [
					{
						text: '取消拉黑',
						style: {
							backgroundColor: '#42b983'
						}
					}
				];
				return i;
			});
		},
		async blackFriendNo(id) {
			// let re = await this.$API.friendApi.blackFriendNo(id);
		},
		async swipeClick(e, index, item) {
			let id = item.userId;
			let { content } = e;
			if (content.text === '取消拉黑') {
				// this.blackFriendNo(id);
				await this.$API.friendApi.blackFriendNo(id);
				this.getBlackList();
			} else if (content.text === '添加') {
			} else {
				uni.showToast({
					title: `点击了${e.content.text}按钮`,
					icon: 'none'
				});
			}
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #fafafa;
}
.u-page {
	padding: 0;
}

.u-demo-block__title {
	padding: 10px 0 2px 15px;
}

.swipe-action {
	&__content {
		padding: 25rpx 0;
		display: flex;
		align-items: center;
		&__text {
			font-size: 15px;
			color: $u-main-color;
			padding-left: 30rpx;
		}
	}
}
</style>
